<template>
  <inline-Modal
    :visible="visible"
    title="任务配置"
    @ok="handelOk()"
    @cancel="handelCancel()"
  >
    <div class="task-config-container">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <div class="config-way">
          <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
              <a-form-model-item label="任务配置方式" prop="configType">
                <a-radio-group
                  v-model="form.configType"
                  @change="configTypeChange($event)"
                >
                  <a-radio value="1"> 选择配置 </a-radio>
                  <a-radio value="2">
                    一键配置（注：点击“一键配置”，系统将按照各五级指标的责任主体一键分配任务）
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
        <div class="config-content">
          <div class="search" v-if="form.configType == 1">
            <a-select
              v-model="responsibleSubject"
              placeholder="请选择责任单位"
              allowClear
              @change="changeResponsible($event)"
            >
              <a-select-option
                :value="item.dicItemCode"
                v-for="item in unitSource"
                :key="item.id"
              >
                {{ item.dicItemName }}
              </a-select-option>
            </a-select>
            <a-button type="primary" @click="changeResponsible('')">
              查询
            </a-button>
          </div>
          <div class="body">
            <div class="tree-container">
              <div class="button-group">
                <div
                  class="button"
                  :class="{ checked: dealSatus == '' }"
                  @click="switchButton('')"
                >
                  全部({{ chooseNumsStatis(0) || 0 }})
                </div>
                <div
                  class="button"
                  :class="{ checked: dealSatus == '1' }"
                  @click="switchButton('1')"
                >
                  已选({{ chooseNumsStatis(1) || 0 }})
                </div>
                <div
                  class="button"
                  :class="{ checked: dealSatus == '2' }"
                  @click="switchButton('2')"
                >
                  未选({{ chooseNumsStatis(2) || 0 }})
                </div>
              </div>
              <a-empty v-if="treeData.length == 0" />
              <a-tree
                v-else
                show-icon
                :default-expand-all="true"
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="treeData"
                @expand="onExpand"
                @select="onSelect"
                :replaceFields="{
                  children: 'childs',
                  title: 'evaluationName',
                  key: 'uuid',
                }"
              >
                <template slot="title" slot-scope="{ evaluationName }">
                  <div class="custom-tree-item flex" :title="evaluationName">
                    <div class="label">{{ evaluationName }}</div>
                  </div>
                </template>
                <!-- 文件夹图标 -->
                <template slot="custom" slot-scope="{ expanded, childs }">
                  <a-icon
                    :type="
                      childs && childs.length > 0
                        ? expanded
                          ? 'folder-open'
                          : 'folder'
                        : 'file'
                    "
                    :class="
                      childs && childs.length > 0 ? 'folder-icon' : 'file-icon'
                    "
                  />
                </template>
              </a-tree>
            </div>
            <div class="right-container">
              <div class="list">
                <vxe-table
                  ref="xTable"
                  height="99%"
                  align="center"
                  show-overflow
                  show-header-overflow
                  border="inner"
                  :data="tableData"
                  :column-config="{ resizable: true }"
                  size="small"
                  :loading="loading"
                >
                  <vxe-column width="60">
                    <template #header>
                      <a-checkbox
                        v-model="allcChecked"
                        :indeterminate="indeterminate"
                        @change="allClick($event)"
                        :disabled="checkDisabled"
                      >
                      </a-checkbox>
                    </template>
                    <template #default="{ row }">
                      <a-checkbox
                        :disabled="checkDisabled"
                        v-model="row.chooseFlag"
                        @change="changeItem($event, row)"
                      >
                      </a-checkbox>
                    </template>
                  </vxe-column>
                  <vxe-column type="seq" width="80" title="序号"></vxe-column>
                  <vxe-column field="assessmentContent" title="五级指标">
                  </vxe-column>
                  <vxe-column field="determine" title="判定标准"> </vxe-column>
                  <vxe-column field="methods" title="审查资料及方式">
                  </vxe-column>
                  <vxe-column field="singleScore" title="总分"> </vxe-column>
                  <vxe-column field="responsibleSubjectDesc" title="责任主体">
                  </vxe-column>
                </vxe-table>
              </div>
              <!-- <div class="pager-container">
                <vxe-pager
                  size="small"
                  background
                  :current-page.sync="pager.page"
                  :page-size.sync="pager.pageSize"
                  :total="pager.total"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
                  :page-sizes="[20, 50, 100, 500]"
                  @page-change="paginationChange"
                >
                  <template #left>
                    <div class="vxe-pager-left-tip-container">
                      共<span>{{ pager.total }}</span
                      >条
                    </div>
                  </template>
                </vxe-pager>
              </div> -->
            </div>
          </div>
        </div>
        <div class="department" v-if="form.configType == 1">
          <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
              <a-form-model-item label="参与部门" prop="orgCodeList">
                <a-select
                  v-model="form.orgCodeList"
                  placeholder="请选择参与部门"
                  mode="multiple"
                  :filter-option="filterOption"
                >
                  <a-select-option
                    :value="item.orgCode"
                    v-for="item in blockNameSource"
                    :key="item.id"
                  >
                    {{ item.orgName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </div>
  </inline-Modal>
</template>

<script>
import { addAttributeByKey } from "@/utils/index.js";
import { flatTreeData } from "@/utils/util";
import { axios } from "@/utils/request";
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.loading = true;
          Promise.all([
            this.getBlockList(),
            this.getSecTypeList(),
            this.getDetail(),
            this.getBsjxTotal(),
          ])
            .then()
            .finally((_) => {
              this.getTreeData();
            });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        //任务配置方式
        configType: "1",
        //参与部门集合
        orgCodeList: [],
      },
      rules: {
        configType: [
          { required: true, message: "请选择项目名称", trigger: "change" },
        ],
        orgCodeList: [
          { required: true, message: "请选择参与部门", trigger: "change" },
        ],
      },
      //分页
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 999,
        total: 0,
      },
      allcChecked: false,
      indeterminate: false,
      checkDisabled: false,
      //树
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      treeId: "",
      //参与部门
      blockLoading: false,
      blockNameSource: [],
      //责任单位
      unitSource: [],
      unitLoading: false,
      responsibleSubject: undefined,
      //状态
      dealSatus: "",
      //数量
      count: {},
      //不涉及项id
      notIds: [],
      //缓存
      cacheList: [],
      cancalChoosed: [],
      headers: { "Content-Type": "application/json" },
      isRespon: false,
    };
  },
  computed: {},
  mounted() {},
  methods: {
    //计算全部-已选-未选数量
    chooseNumsStatis(type = 0) {
      let { allCount, chooseCount, noChooseCount } = this.count;
      switch (type) {
        //全部
        case 0:
          return allCount > 999 ? "999+" : allCount;

        //已选
        case 1:
          return chooseCount > 999 ? "999+" : chooseCount;

        //未选
        case 2:
          return noChooseCount > 999 ? "999+" : noChooseCount;

        default:
          break;
      }
    },
    //选择状态
    switchButton(type) {
      this.dealSatus = type;
      this.getTreeData();
    },
    changeResponsible(ev) {
      if (ev || ev == undefined) {
        this.treeId = "";
      }
      if (!ev) {
        this.isRespon = false;
      } else {
        this.isRespon = true;
      }
      this.getBsjxTotal();
      this.getTreeData();
    },
    //查询不涉及项Id
    getNotIds() {
      return new Promise((resolve, reject) => {
        getRWPZNotIds()
          .then((res) => {
            let { data } = res;
            this.notIds = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.notIds = [];
            reject();
          });
      });
    },

    //查询数量
    getBsjxTotal() {
      return new Promise((resolve, reject) => {
        let { headers } = this;
        let {
          configType,
          contentIdChooseList,
          contentIdNotChooseList,
          id,
          orgCodeList,
          responsibleSubject,
          tenantCode,
        } = this.getCommitParams();
        axios
          .post(
            `/probusiness/qeNew/getRWPZTotalData?tenantCode=${tenantCode}&taskId=${id}&responsibleSubject=${responsibleSubject}`,
            {
              configType,
              contentIdChooseList: contentIdChooseList,
              contentIdNotChooseList: contentIdNotChooseList,
              orgCodeList: orgCodeList,
            },
            {
              headers,
            }
          )
          .then((res) => {
            this.count = res.data;
            resolve();
          })
          .catch((_) => {
            this.count = {};
            reject();
          });
      });
    },

    //类型选择
    configTypeChange(e) {
      let { configType } = this.form;
      if (configType == 2) {
        this.checkDisabled = true;
        this.allcChecked = true;
        this.indeterminate = false;
        this.tableData.forEach((v) => {
          v.chooseFlag = true;
        });
      } else {
        this.checkDisabled = false;
        this.getTableData();
      }
    },

    //查询参与部门
    getBlockList() {
      this.blockLoading = true;
      return new Promise((resolve, reject) => {
        let { headers } = this;
        let { tenantCode } = this.soucre;
        axios
          .get(
            `/mdata/sysOrgExtend/getOrgExtendListByQX?tenantCode=${tenantCode}`,
            {},
            {
              headers,
            }
          )
          .then((res) => {
            this.blockNameSource = res?.data || [];
            resolve();
          })
          .catch((_) => {
            this.blockNameSource = [];
            reject();
          })
          .finally((_) => {
            this.blockLoading = false;
          });
      });
    },

    //查询责任单位
    getSecTypeList() {
      this.unitLoading = true;
      return new Promise((resolve, reject) => {
        // /dicItem/getByProCode
        // this.$post("/system/dicSet/getDicItemByCode", {
        //   code: "secType",
        // });
        let { tenantCode } = this.soucre;
        this.$post(`/system/dicItem/getByProCode?proCode=${tenantCode}`, {})
          .then((res) => {
            let { data } = res;
            this.unitSource = data || [];
            resolve();
          })
          .catch((_) => {
            this.unitSource = [];
            reject();
          })
          .finally((_) => {
            this.unitLoading = false;
          });
      });
    },

    //查询树结构
    getTreeData() {
      this.loading = true;
      let {
        responsibleSubject = "",
        blockNameSource,
        dealSatus,
        isRespon,
      } = this;
      let dept = blockNameSource.filter(
        (v) => v.secTypeValue == responsibleSubject
      );
      if (dept.length > 0 && responsibleSubject) {
        this.form.orgCodeList = dept.map((v) => v.orgCode);
      } else {
        if (isRespon) {
          this.form.orgCodeList = [];
        } else {
          let codes = blockNameSource.map((v) => v.orgCode);
          this.form.orgCodeList = codes;
        }
      }
      return new Promise((resolve, reject) => {
        let { headers } = this;
        let formJson = this.getCommitParams();
        axios
          .post(
            `/probusiness/qeTaskAllocation/getPJZBRWFPList?id=${formJson.id}`,
            {
              ...formJson,
              status: dealSatus,
            },
            {
              headers,
            }
          )
          .then((res) => {
            let source = res.data || [];
            this.treeData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "childs"
            );
            this.getFirstTreeNode();
            resolve();
          })
          .catch((_) => {
            this.loading = true;
            this.treeData = [];
            reject();
          });
      });
    },

    //保留任务配置项状态
    reserveConfigList() {
      let ids = this.cacheList;
      this.tableData.forEach((item) => {
        ids.forEach((v) => {
          if (item.uuid == v.uuid) {
            item.chooseFlag = v.chooseFlag;
          }
        });
      });
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { dealSatus } = this;
      return new Promise((resolve, reject) => {
        let { headers } = this;
        let {
          configType,
          contentIdChooseList,
          contentIdNotChooseList,
          id,
          orgCodeList,
          responsibleSubject,
          tenantCode,
        } = this.getCommitParams();
        axios
          .post(
            `/probusiness/qeTaskAllocation/getPJZBContentRWFPList?id=${this.treeId}&pageNo=${page}&pageSize=${pageSize}`,
            {
              responsibleSubject,
              status: dealSatus,
              taskId: id ?? "",
              orgCodeList,
              contentIdNotChooseList,
              contentIdChooseList,
              configType,
              tenantCode,
            },
            {
              headers,
            }
          )
          .then((res) => {
            let source = res.data?.rows || [];
            this.tableData = source;
            let { cancalChoosed } = this;
            source.forEach((v) => {
              let { uuid, chooseFlag } = v;
              if (chooseFlag == true) {
                //已经选择并且提交的数据
                v.$$hasChoosed = true;
              } else {
                v.$$hasChoosed = false;
              }
              if (cancalChoosed.find((item) => item.uuid == uuid)) {
                v.chooseFlag = false;
              }
            });
            this.pager.total = res.data?.totalCount || 0;
            //一键配置
            if (this.checkDisabled) {
              this.indeterminate = false;
              this.allcChecked = true;
            } else {
              //选择配置
              this.reserveConfigList();
              let chooseData = this.tableData.filter(
                (v) => v.chooseFlag == true
              );
              if (this.tableData.length > 0) {
                if (chooseData.length == this.tableData.length) {
                  this.allcChecked = true;
                  this.indeterminate = false;
                } else {
                  this.allcChecked = false;
                  this.indeterminate = true;
                  if (chooseData.length == 0) {
                    this.indeterminate = false;
                  }
                }
              } else {
                this.allcChecked = false;
                this.indeterminate = false;
              }
            }

            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //查询详情
    getDetail() {
      let { headers } = this;
      let { tenantCode, uuid } = this.soucre;
      axios
        .post(
          `/probusiness/qeTaskAllocation/getConfigDetail?tenantCode=${tenantCode}&id=${uuid}`,
          {},
          {
            headers,
          }
        )
        .then((res) => {
          this.form.configType = res.data?.configType || "1";
          if (this.form.configType == 2) {
            this.checkDisabled = true;
          }
          let codeList = res.data?.orgCodeList || [];
          if (codeList.length || [] > 0) {
            this.form.orgCodeList = codeList;
          }
        })
        .catch((_) => {
          this.form = {
            //任务配置方式
            configType: "1",
            //参与部门集合
            orgCodeList: [],
          };
        });
    },

    getCommitParams() {
      let { form } = this;
      let { uuid, tenantCode } = this.soucre;
      let formJson = {};
      if (form.configType == 2) {
        formJson = {
          configType: form.configType,
          id: uuid,
          tenantCode,
        };
      } else {
        let { chooseList = [], notChooseList = [] } = this.getChooseData();
        formJson = {
          tenantCode,
          configType: form.configType,
          id: uuid,
          orgCodeList: form.orgCodeList,
          contentIdChooseList: chooseList,
          contentIdNotChooseList: notChooseList,
          responsibleSubject: this.responsibleSubject ?? "",
        };
      }
      return formJson;
    },

    //获取选中和未选数据
    getChooseData() {
      let configIds = this.cacheList;
      let chooseList = [],
        notChooseList = [];
      configIds.forEach((item) => {
        if (item.chooseFlag) {
          chooseList.push(item.uuid);
        } else {
          notChooseList.push(item.uuid);
        }
      });
      return {
        chooseList,
        notChooseList: this.cancalChoosed.map((v) => v.uuid),
      };
    },

    //返回
    gotoBack() {
      this.$router.push({
        path: "/nebula/quality-engineering-app/task/allocation",
      });
    },

    //默认展开第一级节点
    getFirstTreeNode() {
      let { treeData } = this;
      if (treeData.length > 0) {
        let flatData = flatTreeData(treeData, "childs");
        if (!this.treeId || !flatData.find((v) => v.uuid == this.treeId)) {
          let item = treeData?.[0] ?? {};
          this.expandedKeys = [item.uuid];
          this.selectedKeys = [item.uuid];
          this.treeId = item.uuid;
        }
      }
      this.pager.page = 1;
      this.getTableData();
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    onSelect(selectedKeys, event) {
      let { uuid } = event.node.dataRef;
      this.selectedKeys = selectedKeys;
      this.selectedKeys = [uuid];
      this.treeId = uuid;
      this.allcChecked = false;
      this.indeterminate = false;
      this.pager.page = 1;
      this.getTableData();
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    //全选
    allClick(e) {
      let { tableData } = this;
      let ev = this.allcChecked;
      let newChoosed = tableData.filter(
        (v) => !v.$$hasChoosed || !v.chooseFlag
      );
      let hasChoosed = tableData.filter((v) => v.$$hasChoosed);
      let cacheIds = this.cacheList.map((v) => v.uuid);
      let allIds = tableData.map((v) => v.uuid);
      let total = tableData.filter((v) => !v.chooseFlag);
      if (ev) {
        this.allcChecked = true;
        this.indeterminate = false;
        this.count.chooseCount += total.length;
        this.count.noChooseCount = this.count.allCount - this.count.chooseCount;
        //选中
        newChoosed.forEach((v) => {
          let { uuid } = v;
          if (!cacheIds.includes(uuid)) {
            this.cacheList.push(v);
          }
        });
      } else {
        this.allcChecked = false;
        this.indeterminate = false;
        //取消
        this.count.noChooseCount += this.count.chooseCount;
        this.count.chooseCount -= tableData.length;
        this.cacheList = this.cacheList.filter((v) => !allIds.includes(v.uuid));
        let ids = this.cancalChoosed.map((v) => v.uuid);
        hasChoosed.forEach((v) => {
          let { uuid } = v;
          if (!ids.includes(uuid)) {
            this.cancalChoosed.push(v);
          }
        });
      }
      tableData.forEach((v) => {
        v.chooseFlag = ev;
      });
    },

    //处理单选级联
    setCascadeItem(checked, merge = []) {
      if (checked) {
        this.tableData.forEach((v) => {
          if (merge.includes(v.serialNumber + "")) {
            v.chooseFlag = true;
          }
        });
      } else {
        this.tableData.forEach((v) => {
          if (merge.includes(v.serialNumber + "")) {
            v.chooseFlag = false;
          }
        });
      }
      let list = this.tableData.filter((v) =>
        merge.includes(v.serialNumber + "")
      );
      return list;
    },
    countNumber(checked, list) {
      if (checked) {
        this.count.chooseCount = this.count.chooseCount + list.length;
        this.count.noChooseCount = this.count.noChooseCount - list.length;
      } else {
        this.count.chooseCount = this.count.chooseCount - list.length;
        this.count.noChooseCount = this.count.noChooseCount + list.length;
      }
    },
    //单选
    changeItem(event, row) {
      let { checked } = event.target;
      let { cacheList } = this;
      let { uuid, $$hasChoosed, mergeItem } = row;
      let ids = [];
      let merge = [];
      if (mergeItem) {
        merge = mergeItem.split(",");
      }
      if (checked) {
        if (!cacheList.find((v) => v.uuid == uuid)) {
          if (!this.cancalChoosed.find((v) => v.uuid == uuid)) {
            if (mergeItem) {
              let list = this.setCascadeItem(checked, merge);
              this.cacheList = [...this.cacheList, ...list];
              this.countNumber(checked, list);
            } else {
              this.cacheList.push(row);
              this.count.chooseCount++;
              this.count.noChooseCount--;
            }
          }
        }
        if ($$hasChoosed == true) {
          if (mergeItem) {
            let list = this.setCascadeItem(checked, merge);
            this.countNumber(checked, list);
            let seriasIs = list.map((v) => v.uuid);
            this.cancalChoosed = this.cancalChoosed.filter(
              (v) => !seriasIs.includes(v.uuid)
            );
          } else {
            this.cancalChoosed = this.cancalChoosed.filter(
              (v) => v.uuid != uuid
            );
          }
        }
      } else {
        if (mergeItem) {
          let list = this.setCascadeItem(checked, merge);
          let deleteIds = list.map((v) => v.uuid);
          this.cacheList = this.cacheList.filter(
            (v) => !deleteIds.includes(v.uuid)
          );
          this.countNumber(checked, list);
        } else {
          this.cacheList = this.cacheList.filter((v) => v.uuid != uuid);
          this.count.chooseCount--;
          this.count.noChooseCount++;
        }
        if (
          $$hasChoosed == true &&
          !this.cancalChoosed.find((v) => v.uuid == uuid)
        ) {
          if (mergeItem) {
            let list = this.setCascadeItem(checked, merge);
            list.forEach((item) => {
              this.cancalChoosed.push(item);
            });
          } else {
            this.cancalChoosed.push(row);
          }
        }
      }
      try {
        this.tableData.forEach((v) => {
          if (v.chooseFlag) {
            throw v;
          }
        });
        this.indeterminate = false;
      } catch (error) {
        this.indeterminate = true;
      }
      this.tableData.forEach((key) => {
        if (key.chooseFlag) {
          ids.push(key.uuid);
        }
      });
      if (ids.length == this.tableData.length) {
        this.indeterminate = false;
        this.allcChecked = true;
      } else {
        this.allcChecked = false;
      }
    },

    handelOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { headers } = this;
          let formJson = this.getCommitParams();
          axios
            .post(
              `/probusiness/qeTaskAllocation/saveOrUpdateConfig`,
              formJson,
              {
                headers,
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success(
                  res.message ? res.message : "操作成功",
                  1.5
                );
                this.$emit("ok");
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch((_) => {})
            .finally((_) => {});
        }
      });
    },
    handelCancel() {
      this.cacheList = [];
      this.cancalChoosed = [];
      this.isRespon = false;
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: @primary-color;
.task-config-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/.ant-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .config-way {
      border-bottom: 1px solid @border-color;
      padding-bottom: 10px;
    }
    .config-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .search {
        margin: 10px 20px;
        display: flex;
        .ant-select {
          width: 200px;
          margin-right: 16px;
        }
      }
      .body {
        flex: 1;
        display: flex;
        overflow: hidden;
        .tree-container {
          flex-shrink: 0;
          width: 342px;
          box-sizing: border-box;
          padding: 0 10px 0px 10px;
          border-right: 1px solid @border-color;
          overflow: auto;
          position: relative;
          .button-group {
            display: flex;
            padding: 0px 10px 10px 10px;
            .button {
              cursor: pointer;
              flex: 1;
              height: 36px;
              background: #ffffff;
              border: 1px solid @primary-color;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 10px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: @primary-color;
              &:last-of-type {
                margin-right: 0;
              }
              &.checked {
                background: @primary-color;
                color: #ffffff;
              }
            }
          }

          .ant-tree {
            .ant-tree-node-content-wrapper {
              width: calc(100% - 34px);
              &.ant-tree-node-selected {
                background: #f5f7fc !important;
                color: @primary-color;
              }
              .folder-icon {
                color: #f5a623;
              }
              .file-icon {
                color: #54baff;
              }
              .ant-tree-title {
                width: calc(100% - 24px);
                display: inline-block;
                .custom-tree-item {
                  width: 100%;
                  height: 100%;
                  .label {
                    flex: 1;
                    overflow: hidden;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-right: 10px;
                  }
                  .value {
                    color: #525a5d;
                    span {
                      color: @primary-color;
                    }
                  }
                }
              }
            }
          }

          .ant-empty {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .right-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding-left: 14px;
          .list {
            height: 100%;
            flex: 1;
          }
          .pager-container {
            flex-shrink: 0;
          }
        }
      }
    }
    .department {
      padding: 20px 40px 0 0;
      border-top: 1px solid @border-color;
    }
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 130px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
  }
}
</style>
